<template>
  <div class="ss__card" v-show="visible">
    <div class="ss__card__header">
      <div class="clearfix">
        <div class="tab">计时器</div>
        <button class="option_close" type="text" @click="hide">
          <svg
            t="1649638293895"
            class="icon chacha"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4328"
            width="12"
            height="12"
          >
            <path
              d="M1024 38.684444L985.315556 0 512 473.315556 38.684444 0 0 38.684444 473.315556 512 0 985.315556 38.684444 1024 512 550.684444 985.315556 1024 1024 985.315556 550.684444 512 1024 38.684444z"
              fill="#999999"
              p-id="4329"
            ></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="ss__card__body">
      <div class="content con" v-if="!startTimer">
        <div class="timer-wrap margin-right">
          <div class="triangle" @click="countNumTen('numOne', 'add')"></div>
          <div class="time-box">
            <div class="base">{{ time.numOne }}</div>
          </div>
          <div class="triangle rotate" @click="countNumTen('numOne', 'minus')"></div>
        </div>

        <div class="timer-wrap">
          <div class="triangle" @click="countNum('numTwo', 'add')"></div>
          <div class="time-box">
            <div class="base">{{ time.numTwo }}</div>
          </div>
          <div class="triangle rotate" @click="countNum('numTwo', 'minus')"></div>
        </div>

        <div class="timer-wrap padding-left margin-right">
          <div class="triangle" @click="countNumTen('numThere', 'add')"></div>
          <div class="round"></div>
          <div class="round rotate-round"></div>
          <div class="time-box">
            <div class="base">{{ time.numThere }}</div>
          </div>
          <div class="triangle rotate" @click="countNumTen('numThere', 'minus')"></div>
        </div>

        <div class="timer-wrap">
          <div class="triangle" @click="countNum('numFour', 'add')"></div>
          <div class="time-box">
            <div class="base">{{ time.numFour }}</div>
          </div>
          <div class="triangle rotate" @click="countNum('numFour', 'minus')"></div>
        </div>
      </div>

      <div class="content eee" v-else>
        <div class="timer-wrap margin-right">
          <div
            class="triangle"
            @click="countNumTen('numOne', 'add')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
          <div class="time-box">
            <div class="base" :class="currentTime == -1 ? 'stopped' : ''">{{ afterTime.numOne }}</div>
          </div>
          <div
            class="triangle rotate"
            @click="countNumTen('numOne', 'minus')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
        </div>

        <div class="timer-wrap">
          <div
            class="triangle"
            @click="countNum('numTwo', 'add')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
          <div class="time-box">
            <div class="base" :class="currentTime == -1 ? 'stopped' : ''">{{ afterTime.numTwo }}</div>
          </div>
          <div
            class="triangle rotate"
            @click="countNum('numTwo', 'minus')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
        </div>

        <div class="timer-wrap padding-left margin-right">
          <div
            class="triangle"
            @click="countNumTen('numThere', 'add')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
          <div class="round"></div>
          <div class="round rotate-round"></div>
          <div class="time-box">
            <div class="base" :class="currentTime == -1 ? 'stopped' : ''">{{ afterTime.numThere }}</div>
          </div>
          <div
            class="triangle rotate"
            @click="countNumTen('numThere', 'minus')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
        </div>

        <div class="timer-wrap">
          <div
            class="triangle"
            @click="countNum('numFour', 'add')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
          <div class="time-box">
            <div class="base" :class="currentTime == -1 ? 'stopped' : ''">{{ afterTime.numFour }}</div>
          </div>
          <div
            class="triangle rotate"
            @click="countNum('numFour', 'minus')"
            :class="isStop || timer ? 'disable-click' : ''"
          ></div>
        </div>
      </div>

      <div class="floot" v-if="!startTimer">
        <button type="primary" size="small" @click="start" class="button button_primary">开始计时</button>
      </div>
      <div v-else style="text-align: center">
        <button
          type="primary"
          class="button button_primary"
          v-if="currentTime == -1"
          size="small"
          style="border: none; width: 106px"
          @click="reset"
        >
          重新开始
        </button>
        <div v-else>
          <button
            type="primary"
            size="small"
            class="button button_primary"
            style="background: #424252; border: none; width: 106px"
            @click="reset"
          >
            重置
          </button>
          <button
            type="primary"
            size="small"
            class="button button_primary"
            style="border: none; width: 106px"
            @click="stop"
            v-if="!isStop"
          >
            暂停
          </button>
          <button
            type="primary"
            class="button_primary button"
            size="small"
            style="border: none; width: 106px"
            @click="init"
            v-else
          >
            继续
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      time: {
        numOne: 0,
        numTwo: 5,
        numThere: 0,
        numFour: 0
      },
      afterTime: {
        numOne: 0,
        numTwo: 0,
        numThere: 0,
        numFour: 0
      },
      currentTime: 1, // 倒计时多少秒
      startTimer: false, // 倒计时还未开始，可以编辑时间
      timer: '',
      timeObj: null, // 未格式化的时间对象
      showTime: {}, // 展示载页面上的时间 格式化后的时间
      beforCurrentTime: 0, // 重置时，将先前的间隔时间记起来
      isStop: false
    }
  },

  methods: {
    show() {
      this.visible = true
    },
    hide() {
      this.visible = false
      this.$emit('hide')
      this.$emit('close', this.currentTime)
    },
    init() {
      this.isStop = false
      this.timer = setInterval(() => {
        this.getDistanceSpecifiedTime(this.currentTime)
      }, 1000)
      this.$emit('keep', this.currentTime)
    },
    close() {
      clearInterval(this.timer)
      this.visible = false
      // this.currentTime = -1
      this.startTimer = false
      this.$emit('close', this.currentTime)
    },
    start() {
      // 新加的部分
      this.afterTime = {
        numOne: 0,
        numTwo: 0,
        numThere: 0,
        numFour: 0
      }
      if (this.time.numOne == 0) {
        if (this.time.numThere == 0) {
          this.currentTime = this.time.numTwo * 60 + this.time.numFour
          this.beforCurrentTime = this.currentTime
        } else {
          this.currentTime = this.time.numTwo * 60 + this.time.numThere * 10 + this.time.numFour
          this.beforCurrentTime = this.currentTime
        }
      } else {
        if (this.time.numThere == 0) {
          this.currentTime = this.time.numOne * 10 * 60 + this.time.numTwo * 60 + this.time.numFour
          this.beforCurrentTime = this.currentTime
        } else {
          this.currentTime =
            this.time.numOne * 10 * 60 + this.time.numTwo * 60 + this.time.numThere * 10 + this.time.numFour
          this.beforCurrentTime = this.currentTime
        }
      }
      this.$emit('start', this.currentTime)
      this.startTimer = true
      this.getDistanceSpecifiedTime(this.currentTime)
      this.timer = setInterval(() => {
        this.getDistanceSpecifiedTime(this.currentTime)
      }, 1000)
    },
    // 计算秒数
    calcSeconds() {
      if (this.time.numOne == 0) {
        if (this.time.numThere == 0) {
          this.currentTime = this.time.numTwo * 60 + this.time.numFour
        } else {
          this.currentTime = this.time.numTwo * 60 + this.time.numThere * 10 + this.time.numFour
        }
      } else {
        if (this.time.numThere == 0) {
          this.currentTime = this.time.numOne * 10 * 60 + this.time.numTwo * 60 + this.time.numFour
        } else {
          this.currentTime =
            this.time.numOne * 10 * 60 + this.time.numTwo * 60 + this.time.numThere * 10 + this.time.numFour
        }
      }
      return this.currentTime
    },
    getDistanceSpecifiedTime(time) {
      this.timeObj = {
        // 时间对象
        minutes: Math.floor(((time * 1000) / 1000 / 60) % 60),
        seconds: Math.floor(((time * 1000) / 1000) % 60)
      }
      // 计算出时分秒  格式化后的
      this.showTime = {
        minutes: this.timeObj.minutes < 10 ? '0' + this.timeObj.minutes : this.timeObj.minutes,
        seconds: this.timeObj.seconds < 10 ? '0' + this.timeObj.seconds : this.timeObj.seconds
      }
      this.currentTime--
      if (this.showTime.minutes == 0) {
        let stringSeconds = this.showTime.seconds.toString()
        this.afterTime.numOne = 0
        this.afterTime.numTwo = 0
        this.afterTime.numThere = stringSeconds.charAt(0)
        this.afterTime.numFour = stringSeconds.charAt(1)
      } else {
        let stringMinutes = this.showTime.minutes.toString()
        let stringSeconds = this.showTime.seconds.toString()
        this.afterTime.numOne = stringMinutes.charAt(0)
        this.afterTime.numTwo = stringMinutes.charAt(1)
        this.afterTime.numThere = stringSeconds.charAt(0)
        this.afterTime.numFour = stringSeconds.charAt(1)
      }
      if (this.currentTime < 0) {
        clearInterval(this.timer)
      }
    },
    countNumTen(who, type) {
      if (type == 'add') {
        this.time[who] = this.time[who] + 1
        if (this.time[who] > 5) {
          this.time[who] = 0
        }
      }
      if (type == 'minus') {
        this.time[who] = this.time[who] - 1
        if (this.time[who] < 0) {
          this.time[who] = 5
        }
      }
      let data = {
        time: this.calcSeconds(),
        type: type
      }

      this.$emit('change', data)
    },
    countNum(who, type) {
      if (type == 'add') {
        this.time[who] = this.time[who] + 1
        if (this.time[who] > 9) {
          this.time[who] = 0
        }
      }
      if (type == 'minus') {
        this.time[who] = this.time[who] - 1
        if (this.time[who] < 0) {
          this.time[who] = 9
        }
      }
      let data = {
        time: this.calcSeconds(),
        type: type
      }

      this.$emit('change', data)
    },
    reset() {
      clearInterval(this.timer)
      this.currentTime = this.beforCurrentTime
      this.startTimer = false
      this.$emit('reset', this.currentTime)
    },
    stop() {
      this.isStop = true
      clearInterval(this.timer)
      this.$emit('stop', this.currentTime)
    }
  }
}
</script>
<style scope>
.button + .button {
  margin-left: 10px;
}
.button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 9px 15px;

  font-size: 12px;
  border-radius: 3px;
}
.button_primary {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}
</style>
<style scoped>
.ss__card {
  position: absolute;
  left: 300px;
  top: 200px;
  min-width: 300px;
}
.ss__card__header {
  color: #fff;
  border: none;
  background: #30323d;
  padding: 10px 20px;
}
.ss__card__header .clearfix {
  display: flex;
  justify-content: space-between;
}
.ss__card__header .clearfix .option_close {
  position: absolute;
  right: 14px;
  top: 12px;
  background: none;
  border: none;
  padding: 3px 0px;
}
.ss__card__header .clearfix .chacha {
  font-size: 12px;

  cursor: pointer;
}
.ss__card__body {
  color: #fff;
  background: #30323d;
  padding: 0 20px 20px 20px;
}
.clearfix {
  text-align: center;
}

.clearfix .tab {
  display: inline-block;
  font-size: 16px;
}
.clearfix .chacha {
  font-size: 12px;
  float: right;
}

.content {
  padding: 20px 0;
  display: flex;
  align-items: center;
  height: 173px;
  justify-content: center;
}
.timer-wrap {
  position: relative;
}
.triangle {
  margin: 0 auto 6px auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 8px 10px 8px;
  border-color: transparent transparent #a9aaad transparent;
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
}
.disable-click {
  cursor: no-drop;
}

.time-box {
  position: relative;
  box-sizing: border-box;
  height: 56px;
  width: 48px;
  text-align: center;
  background-color: #424250;
  perspective: 60px;
  border-radius: 3px;
  color: #fff;
  line-height: 56px;
  font-size: 40px;
}
.time-box:after {
  content: '';
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 27px;
  width: 100%;
  border-bottom: 1px solid #282932;
}

.rotate {
  margin: 6px auto 0 auto;
  transform: rotateX(-180deg);
}
.round {
  width: 6px;
  position: absolute;
  border-radius: 50%;
  background: #fff;
  height: 6px;
  z-index: 1;
  top: 35px;
  left: 5px;
}
.rotate-round {
  top: 49px !important;
  transform: rotateX(-180deg);
}
.padding-left {
  padding-left: 16px;
}
.margin-right {
  margin-right: 4px;
}
.floot {
  text-align: center;
}

.stopped {
  color: #fb6161 !important;
}
</style>
